requirejs.config({
    baseUrl: 'js/lib',
    paths: {
        'jquery': 'jquery-3.3.1',
        'bootstrap': '../bootstrap',
        'Swiper': '../swiper',
        'serve': '../serve',
    },
    shim: {
        jquery: {
            exports: 'jquery'
        },
        bootstrap: {
            deps: ['jquery'],
            exports: 'bootstrap',
        },
        Swiper: {
            deps: ['jquery'],
            exports: 'Swiper',
        },
        serve: {
            deps: ['jquery'],
            exports: 'serve',
        },
    }
});

define([
    'jquery',
    'bootstrap',
    'Swiper',
    'serve',

], function($, bootstrap, Swiper, serve) {
    'use strict';
    (function($){
        jQuery.extend({
            a: function () {

                $("#banner-menu li").hover(
                    function() {
                      // 绑定了鼠标事件，并添加了class属性
                      $(this).addClass('active');
                      var lis = document.querySelector("#banner-menu li .active");
                      
                      // 找到active的索引值
                      // 传入素相对原先集合的位置
                      var index = $(this).index(lis);
                      // console.log(index);
              
                      // 通过索引值返回对应的dom节点
                      var item = $(".banner-menu-item").get([index]);
                      // console.log(item);
              
                      // 让dom节点显示
                      $(item).fadeIn('fast')
              
                    },
                    function() {
                      // 移除了class
                     $(this).removeClass('active');
                     $(".banner-menu-item").fadeOut('fast', function() {
                      $(".banner-menu-item").hover(
                        function() {
                          $(this).fadeIn('fast');
                        },
                        function() {
                          $(this).fadeOut('fast');
                        },
                      );
                     });
              
                    }
                  );
            },
            b: function () {
                // 解构赋值
                const [a, b, c] = [
                    ['川菜','湘菜','粤菜','鲁菜','浙菜','苏菜','淮扬菜','闽菜','徽菜','云南菜','港台美食'],
                    ['主食','热菜','凉菜','汤羹','小吃'],
                    ['早餐','便当','健身食谱','婴儿食谱'],
                   ];
                   // console.log(a, b, c);
               
                   const $first = $(".banner-menu-item").eq(0);
                   $([a, b, c]).each(function(index,element) {
                     // console.log(index, element);
                     const $i = index;
                     const $dl = $($first).find("dl").get($i);
                     // console.log($dl);
                     $(element).each(function(index, element) {
                       // console.log(index,element);
                       const $iL = index;
                       const $dd = $($dl).find("dd").get($iL);
                       $($dd).find("a").html(element);
                     })
                   })
               
                   // 渲染美食专题里面的数据
                   const $food = [
                     '一提到烘焙，很多人的第一反应总是甜。',
                     '咸香味十足的香葱曲奇、中国风咸味玛德琳。',
                     '油皮原料混合揉成光滑面团，静放让其发酵。',
                     '最好发酵好的面团，揉面排气，擀面杖擀成。',
                     '把长方形的面块折叠起来，盖上保鲜膜松弛。',
                   ];
                   // console.log($food);
                   // 一般选不到，都是属性名搞错了
                   // 常识性的错误，id名只能用一次
               
                   const $fitem = $(".food-content-item");
                   const $lis = '<li><a href="mobile-detail.html"></a></li>';
               
               
                   // console.log($fitem);
                   const $ul = $($fitem).find("ul");
                   // console.log($ul);
                   $($food).each(function(index, element) {
                     // console.log(index, element);
                     // 记录索引值
                     const $index = index;
               
                     // 复制，添加，循环节点, 全面必须是$()
                     $($lis).clone().appendTo($ul);
               
                     //如果是随机数据，会更新节点数 
                     //每遍历一次，都会查找节点的数量
               
                     // 找到所每次遍历ul添加节点后的li
                     // 避免和其他变量重名
                     const $litems = $($ul).find("li");
                     // console.log($litems);
               
                     // 每一次遍历只会修改一次数据，就是所在索引对应的li的数据
                     // 中文的标点符号无法识别
                     const $litem = $litems.get($index);
                     // 找到对应li下对应的a标签，修改文本值
                     $($litem).find("a").html(element);
               
                   });
               
                   // 渲染健康专题的数据
                   const $health = [
                     '午餐也是十分重要的一餐',
                     '要吃一些绿叶蔬菜、鱼肉、瘦肉',
                     '冬瓜瘦肉粥、西红柿鸡蛋汤等',
                   ];
                   // console.log($health);
                   // 需要一个模版
                   const $tul = [
                     '<ul class="col-md-4 col-lg-4 health-text-item">',
                       '<li><a href="mobile-detail.html"></a></li>',
                       '<li><a href="mobile-detail.html"></a></li>',
                       '<li><a href="mobile-detail.html"></a></li>',
                     '</ul>',
                   ];
                   // 忘记模版是一个数组，需要拼接字符串
                   // console.log($tul.join(''));
                   const $tuls= $tul.join('');
                   // console.log($tuls);
                   
                   const $row = $(".health-content-text .row")
               
                   // 生成模版
                   for(let i = 0; i < 4; i++) {
                     // 一共4组数据
                     //变量没有引号
                     $($tuls).clone().appendTo($row);
                   };
                   // 遍历数据
                   $($health).each(function(index, element) {
                     // console.log(index,element);
                     //记录索引值
                     const $index = index;
                     const $item = element;
                     // 不管有多少个都可以渲染出来，
                     $(".health-text-item").each(function(index, element) {
                       // console.log(index,element);
                       // 还是要找到对应的索引才能渲染
                       const a = $(element).find("li").get($index);
                       // console.log(a);
                       $(a).find("a").html($item);
                     })
               
                   });
            },
            c: function () {
                console.log('表单验证');
                $('input[type|="tel"]').attr('value', '');
                // var $tel = $('input[type|="tel"]').val();
                // console.log($tel);
                $('input[type|="email"]').attr('value', '');
                // var $mail = $('input[type|="email"]').val();
                // console.log($mail);


                // var $label = $('.inline-tel').find('label').last();
                // console.log($label);
                // $($label).click(function () {
                //     console.log('手机号更换为'+$tel);
                //     $('input[type|="tel"]').attr('value', '');
                // });
                // var $labels = $('.inline-email').find('label').last();
                // console.log($label);
                // $($labels).click(function () {
                //     console.log('邮箱更换为'+$mail);
                //     $('input[type|="email"]').attr('value', '');
                // });
                // $('.inline-submit input').click(function () {
                //     console.log('提交成功');
                // });

                // 新修改
                $('input[type|="tel"]').change(function () {
                    var $val = $(this).val();
                    console.log('更换为' + $val);

                });
                $('input[type|="email"]').change(function () {
                    var $val = $(this).val();
                    console.log('更换为' + $val);
                });

                
            },

        });
    })(jQuery);
    $.a();
    $.b();
    $.c();

    var swiper1 = new Swiper('#swiper1',{
        autoplay: true,
        direction: 'horizontal',
        speed: 300,
        loop: false,
        mousewheel: true,
        preventClicks: false,
        pagination: {
            el: '#m-b-p',
            clickable: true,
        },
    });
    var swiper2 = new Swiper('#swiper2',{
        slidesPerView : 2,
        slidesPerGroup : 2,
        spaceBetween : 11,
        autoplay: true,
        direction: 'horizontal',
        speed: 300,
        loop: false,
        mousewheel: true,
        preventClicks: true,
        navigation: {
            nextEl: '#l-s-n',
            prevEl: '#l-s-p',
            hideOnClick: true,
        },

    });
    var swiper3 = new Swiper('#swiper3',{
        autoplay: true,
        direction: 'horizontal',
        speed: 300,
        loop: false,
        mousewheel: true,
        preventClicks: false,
        pagination: {
            el: '#b-p',
            clickable: true,
        },
    });
    var swiper4 = new Swiper('#swiper4',{
        slidesPerView : 3,
        slidesPerGroup : 3,
        spaceBetween : 7,
        autoplay: true,
        direction: 'horizontal',
        speed: 300,
        // loop: false,
        mousewheel: true,
        preventClicks: true,
        navigation: {
            nextEl: '#l-n',
            prevEl: '#l-p',
            hideOnClick: true,
        },
        

    });

    
});